<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user-section">
      <view class="user-info" @click="handleLogin">
        <image class="avatar" :src="userInnfo.avatar || '/static/avatar.png'" mode="aspectFill" />
        <view class="info">
          <text class="name">{{ userInnfo.nickname || "登录/注册" }}</text>
          <text class="level" v-if="userInnfo.level">星享银星级</text>
        </view>
      </view>
      <image class="membership-card" src="/static/membership-card.png" mode="widthFix" />
    </view>

    <!-- 订单状态 -->
    <view class="order-status" @click="goToOrderPage">
      <view class="status-item" v-for="item in orderStatus" :key="item.type">
        <text class="count">{{ item.count }}</text>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>
    <!-- 功能入口 -->
    <view class="func-grid">
      <view class="func-item" v-for="(item, index) in funcList" :key="index" @click="navTo(item.path)">
        <image class="icon" :src="item.icon" mode="aspectFit" />
        <text class="label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 服务 -->
    <view class="service-list">
      <view class="service-item" v-for="item in services" :key="item.label" @click="navTo(item.path)">
        <image class="service-icon" :src="item.icon" mode="aspectFit" />
        <text class="service-label">{{ item.label }}</text>
        <uni-icons class="arrow" type="right" size="30" />
      </view>
    </view>
  </view>

</template>

<script setup>
import { ref, computed, reactive } from 'vue'
// import { useUserStore } from '@/stores/user'
import { onShow } from '@dcloudio/uni-app'

// const userStore = useUserStore()

const userInnfo = ref({
  level: 1,
})

// const userInfo = computed(() => userStore.userInfo)

const orderStatus = reactive([
  { type: 1, label: '待付款', count: 2 },
  { type: 2, label: '制作中', count: 1 },
  { type: 3, label: '待取餐', count: 0 },
  { type: 4, label: '已完成', count: 5 }
])

const funcList = reactive([
  { label: '优惠券', icon: '/static/coupon.png', path: '/pages/coupon/list' },
  { label: '收藏商品', icon: '/static/favorite.png', path: '/pages/favorite/list' },
  { label: '地址管理', icon: '/static/address.png', path: '/pages/address/list' },
  { label: '客服中心', icon: '/static/service.png', path: '/pages/service/index' }
])

const services = reactive([
  { label: '礼卡管理', icon: '/static/giftcard.svg', path: '/pages/giftcard' },
  { label: '钱包', icon: '/static/wallet.svg', path: '/pages/wallet' },
  { label: '会员权益', icon: '/static/benefit.svg', path: '/pages/benefit' },
  { label: '设置', icon: '/static/set.svg', path: '/pages/benefit' },
  { label: '条款与协议', icon: '/static/deal.svg', path: '/pages/benefit' }
])

const handleLogin = () => {
  // TODO: 登录校验
  // if (!userStore.isLogin) {
  //   uni.navigateTo({ url: '/pages/login/index' })
  // }
}
const goToOrderPage = () => {
  uni.switchTab({
  url: '/pages/order/index'
})
}



const navTo = (path) => {
  console.log(path);

  uni.navigateTo({
    url: path,
    success: () => {
      uni.vibrateShort() // 添加震动反馈
    }
  })
}

// onShow(() => {
//   userStore.loadUserInfo()
// })
</script>

<style lang="scss" scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

.user-section {
  background:  linear-gradient(180deg, #2a2f33, #f1bbc9);
  padding: 80rpx 30rpx 20rpx;

  .user-info {
    display: flex;
    align-items: center;
    padding: 40rpx;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
    }

    .name {
      font-size: 36rpx;
      color: #333;
      font-weight: 500;
      display: block;
      margin-bottom: 10rpx;
    }

    .level {
      font-size: 24rpx;
      color: #666;
      padding: 6rpx 16rpx;
      background: #f5f5f5;
      border-radius: 24rpx;
    }
  }

  .membership-card {
    width: 100%;
    margin-top: 30rpx;
  }
}

.order-status {
  background: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-around;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .status-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .count {
      font-size: 36rpx;
      color: #006635;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .label {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.func-grid {
  background: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 30rpx 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .func-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 16rpx;
    }

    .label {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.service-list {
  background: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  padding: 0 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .section-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;
  }

  .service-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .service-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

    .service-label {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}
</style>
